<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

    <!-- 引入bootstrap的css -->
    <link rel="stylesheet" href="../js/bootstrap/bootstrap3/css/bootstrap.css"></link>
    <link rel="stylesheet" href="../js/bootstrap/bootstrap3/css/bootstrap.css.map"></link>
    <!-- 引入jquery的js  -->
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <!-- 引入bootstrap的js -->
    <script type="text/javascript" src="../js/bootstrap/bootstrap3/js/bootstrap.js"></script>
    <!-- 引入boostrap的表格的css、js -->
    <link rel="stylesheet" href="../js/bootstrap/bootstrap-table/bootstrap-table.css"></link>
    <script type="text/javascript" src="../js/bootstrap/bootstrap-table/bootstrap-table.js"></script>
    <script type="text/javascript" src="../js/bootstrap/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    <!-- 引入bootbox弹框的js -->
    <script type="text/javascript" src="../js/bootstrap/bootstrap-bootbox/bootbox.js"></script>
    <!-- 引入bootbox时间 的css -->
    <link rel="stylesheet" href="/js/bootstrap/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css"></link>
    <!-- 引入bootbox时间 的js -->
    <script type="text/javascript" src="/js/bootstrap/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="/js/bootstrap/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    <!-- 引入bootbox上传图片 的css -->
    <link rel="stylesheet" href="../js/bootstrap/bootstrap-fileinput/css/fileinput.css"></link>
    <!-- 引入bootbox上传图片 的js -->
    <script type="text/javascript" src="../js/bootstrap/bootstrap-fileinput/js/fileinput.js"></script>
    <script type="text/javascript" src="../js/bootstrap/bootstrap-fileinput/js/locales/zh.js"></script>
    <!-- 引入bootbox开关 按钮 的css -->
    <link rel="stylesheet" href="../js/bootstrap/bootstrap-switch-master/css/bootstrap3/bootstrap-switch.css"></link>

<style>


</style>

<body background="\img\zz.jpg;">





    <div style="width: 600px; position:absolute; left: 300px;top: 100px">
        <span ><h2 style="color: #BDEBEE">用户注册</h2></span>

        <div class="form-group">
            <div class="row">
                <div class="col-md-2"><label><h4 style="color: #BDEBEE">手机号</h4></label></div>
                <div class="col-md-6"><input style="font-size:  16px" class="form-control" id="phone" name="phone" ></div>
            </div>
        </div>
        <div class="form-group">
            <div class="row">
                <div class="col-md-2"><label><h4 style="color: #BDEBEE">验证码</h4></label></div>
                <div class="col-md-3"><input style="font-size: 16px" id="code" class="form-control"  name="uname" ></div>

                <div class="col-md-1"><button  onclick="sendCode()" class="btn btn-primary " id="anew" type="button">获取验证码</button></div>
            </div>
        </div>
        <div class="form-group">
            <div class="row">
                <div class="col-md-2"><label><h4 style="color: #BDEBEE">创建密码</h4></label></div>
                <div class="col-md-6"><input style="font-size:  16px" type="password" class="form-control" id="pwd1" name="userPwd" ></div>
            </div>
        </div>
        <div class="form-group">
            <div class="row">
                <div class="col-md-2"><label><h4 style="color: #BDEBEE">确认密码</h4></label></div>
                <div class="col-md-6"><input style="font-size:  16px" type="password" class="form-control" id="pwd2"  name="userPwd" ></div>
            </div>
        </div>
        <div class="form-group">
            <div class="row">
                <div class="col-md-2"></div>
                <div class="col-md-6"><button style="width: 200px" onclick="addUser()" class="btn btn-primary " type="button">注册</button></div>
            </div>
        </div>




    </div>







</body>
  <script>
      //定时器
      counttime=60;//总秒钟

      function timing(){
          if(counttime>=0){
              $("#anew").html(counttime+"s后重新获取");


              counttime--;
              var tt =  window.setTimeout("timing()",1000);
          }else{
              window.clearTimeout(tt);
              $("#anew").html("获取验证码");
              $("#anew").prop("disabled",false);
              counttime=60;

          }


      }

      //发送验证码
      function sendCode(){
          var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
          if (!reg_tel.test($("#phone").val())) {
              alert("请正确填写您的手机号码！");

              return ;
          }
          $.ajax({
              url:"../user/sendCode",
              type:"get",
              data:{phone:$("#phone").val(),typ: "addUser"},
              success:function (data) {
                  alert(data);
                  if(data=="验证码发送成功！"){
                      $("#anew").prop("disabled",true);
                      timing();

                  }


              }
          })
      }


      //注册
     function  addUser(){
          if($("#pwd1").val()!=$("#pwd2").val()){
              alert("密码输入不一致");
              return;
          }

         $.ajax({
             url:"../user/addUser",
             type:"post",
             data:{phone:$("#phone").val(),userPwd:$("#pwd2").val(),code:$("#code").val(),typ: "addUser"},
             success:function (data) {
                 alert(data)
                 if (data=="注册成功！！"){
                     location.href="../page/login";
                 }
             }
         })

     }
  </script>


</html>